import React, { Component } from 'react'
import Header from '../../components/Header/Header'
import Tablist from '../../components/Tablist/Tablist'
import { Button, Mask, Popup, Toast } from 'antd-mobile'
import { imgPre } from '../../request/http'
import './Detail.less'
import { connect } from 'react-redux'
import { bindActionCreators } from 'redux'

// 底部图片
import kefu from '../../assets/img/kefu.png'
import dianpu from '../../assets/img/dianpu.png'
import gwc from '../../assets/img/gwc.png'
import { Link } from 'react-router-dom'
import { getGoodsinfo, getNum, getVisible, actions, getArr } from '../../store/modules/detail'

class Detail extends Component {
  render() {
    console.log(this.props)
    let { arr, goodsinfo, visible, num, detailFn: { changeVisible, changeNum ,requestAddCart} ,match:{params:{type}}} = this.props;
    return (
      <div className='detail'>
        <Header title="商品详情" back></Header>
        {/* 3.页面渲染 */}
        <Tablist arr={arr}></Tablist>
        <div className='content'>
          <img src={imgPre + goodsinfo.img} alt="" />
          <div className='text'>
            <span>{'￥' + goodsinfo.price}</span>
            <i>{'￥' + goodsinfo.market_price}</i>
            <p>{goodsinfo.goodsname}</p>
          </div>
        </div>
        {/* 弹窗部分 */}
        {/* 遮罩层 */}
        <Mask visible={visible} onMaskClick={() => changeVisible(false)} />
        {/* 弹窗 */}
        <Popup
          visible={visible}
          onMaskClick={() => changeVisible(false)}
          bodyStyle={{ height: '40vh' }}
        >
          <div className='nums'>
            购买数量：
            <span>
              <button onClick={()=>changeNum(num-1)}>-</button>
              <input type="text" value={num} onChange={() => { }} />
              <button onClick={()=>changeNum(num+1)}>+</button>
            </span>
          </div>
          <div className='sure' onClick={()=>requestAddCart(type)}>确定</div>
        </Popup>
        {/* 底部导航 */}
        <footer className='footer'>
          <ul className='icon'>
            <li>
              <img src={kefu} alt="" />
              <div>客服</div>
            </li>
            <li>
              <img src={dianpu} alt="" />
              <div>店铺</div></li>
            <li>
              <Link to="/index/shop">
                <img src={gwc} alt="" />
                <div>购物车</div>
              </Link>
            </li>
          </ul>
          <div className='btn'>
            <Button onClick={() => changeVisible(true)}>加入购物车</Button>
            <Button>立即购买</Button>
          </div>
        </footer>
      </div>
    )
  }
  componentDidMount() {
    let id = this.props.match.params.id;
    this.props.detailFn.requestGoodsinfo(id);
  }
}

// 取数据
const mapStateToProps = state => {
  return {
    goodsinfo: getGoodsinfo(state),
    visible: getVisible(state),
    num: getNum(state),
    arr: getArr(state)
  }
}
// 取方法
const mapDispatchToProps = dispatch => {
  return {
    detailFn: bindActionCreators(actions, dispatch)
  }
}
export default connect(mapStateToProps, mapDispatchToProps)(Detail)
